import { useCounterStore } from '@/stores/counter';
import { useUserStore } from '@/stores/user';
import { defineComponent, ref } from 'vue';
const counter = useCounterStore();
const user = useUserStore();
const { changeName, changeAge } = user;
const { increment } = counter;

const MyComponent = defineComponent({
  props: {
    message: String,
  },

  setup(props) {
    const num = ref(0);
    const onChangeAge = (e: Event) => {
      const target = e.target as HTMLInputElement;
      changeAge(Number(target.value));
    };

    const onChangeName = (e: Event) => {
      const target = e.target as HTMLInputElement;
      changeName(target.value);
    };

    // 返回render函数
    return () => (
      <div class="my-component">
        <h2>TSX测试</h2>
        <h3>{props.message}</h3>
        <button onClick={increment}>点击: {counter.count}</button>
        <div>{counter.doubleCount}</div>
        <hr />
        <div>
          name: {user.name} age: {user.age}
        </div>
        <div>
          age:
          <input type="number" value={user.age} onChange={onChangeAge} />
        </div>
        <br />
        <div>
          name:
          <input value={user.name} onChange={onChangeName} />
        </div>
      </div>
    );
  },
});

export default MyComponent;
